<template>
  <div>
      <template v-if="!item.children||item.children.length === 0">
          <el-menu-item :index="item.uri" @click="menuClick(item)">
            <i class="el-icon-menu"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
      </template>

      <el-submenu v-else :index="item.uri">
        <template slot="title" >
          <i class="el-icon-menu"></i>
          <span slot="title">{{item.name}}</span>
        </template>

        <template v-for="(child, index) in item.children">
          <sidebar-item
            v-if="child.children&&child.children.length>0"
            :item="child"
            :key="'c'+index"/>
          <el-menu-item v-else :key="'b'+index" :index="child.uri" @click="submenuItemClickEvt(child)">
            <i class="el-icon-location"></i>
            <span slot="title">{{child.name}}</span>
          </el-menu-item>
        </template>
      </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'SidebarItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  mounted () {
  },
  methods: {
    menuClick (menu) {
      // console.log(menu)
      this.$router.push({path: menu.uri})
    },
    submenuItemClickEvt (menu) {
      // console.log(menu)
      this.$router.push({path: menu.uri})
    }
  }
}
</script>
